<template>
  <div class="layoutBox">
    <div
      class="menuTip"
      v-show="!sidebarShow"
      :style="'color:' + filterColor()"
    >
      <i class="el-icon-arrow-right" style="font-size: 20px"></i>
    </div>
    <div class="siderBarbox">
      <div class="activeBar" @mouseenter="changeSidebar(true)"></div>
      <div @mouseleave="changeSidebar(false)">
        <el-menu
          :class="sidebarShow ? 'slide-in-left' : 'slide-out-left'"
          v-show="sidebarShow"
          style="height: 100vh"
          :default-active="defaultPath"
          class="siderBar"
          @open="handleOpen"
          @close="handleClose"
          text-color="#fff"
          active-text-color="#FF8080"
          router
        >
          <div class="logo" @click="$router.push('/')">
            <div>
              <img src="../assets/logo.png" alt="三花联网" />
            </div>
          </div>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-help" style="color: white"></i>
              <span>数据采集</span>
            </template>
            <el-menu-item route="/" index="/">设备状态</el-menu-item>
            <el-menu-item route="/equipmentDetail" index="/equipmentDetail"
              >设备详情</el-menu-item
            >
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-s-platform" style="color: white"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item route="/equipment" index="/equipment"
              >设备管理</el-menu-item
            >
            <el-menu-item route="/program" index="/program"
              >程序管理</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  computed: {
    ...mapState(["sidebarShow"]),
  },
  data() {
    return {
      defaultPath: "/",
    };
  },
  watch: {
    "$route.path": {
      handler(n, v) {
        console.log(n);
        this.defaultPath = n;
      },
    },
  },
  mounted() {
    this.defaultPath = this.$route.path
  },
  methods: {
    filterColor() {
      if (
        this.$route.path == "" ||
        this.$route.path == "/equipmentDetail" ||
        this.$route.path == "/"
      ) {
        return "#fff";
      } else {
        return "#1e6ebe";
      }
    },
    changeSidebar(bool) {
      this.$store.commit("setSidebar", bool);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style scoped lang="scss">
.layoutBox {
  position: relative;
  .menuTip {
    position: absolute;
    left: 6px;
    color: white;
    top: 20px;
    cursor: pointer;
    z-index: 100;
  }
}
:deep(.siderBar) {
  background-color: rgb(13, 88, 163) !important;
  opacity: 0.9 !important;
  width: 201px;
  .el-menu-item {
    width: 100%;
  }
  .el-menu {
    background-color: rgb(13, 58, 104) !important;
  }
  .el-menu-item:hover,
  .el-menu-item:focus {
    outline: none;
    background-color: #547faa;
  }
  .el-submenu__title:hover {
    background-color: #547faa;
  }
  .el-submenu__icon-arrow,
  .el-icon-arrow-down {
    color: white;
  }
}
.siderBarbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1200;
  .logo {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    cursor: pointer;
    div {
      height: 50px;
      width: 50px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.activeBar {
  position: absolute;
  height: 100vh;
  width: 24px;
  // border: 1px solid red;
}
</style>
